<template>
  <div class="approve">
    <el-form :inline="true">
      <el-form-item label="员工姓名">
        <el-select v-model="form.userIds" placeholder="请选择员工姓名..." value-key="id" @change="handleCurrentChange(1)" size="small" multiple :collapse-tags="true" style="width: 20vw;"
                   filterable clearable>
          <el-option :label="item.userName+'（'+item.jobNo+'）'" :value="item.userId" v-for="item in $store.state.userList">
            <span style="float: left">{{ item.userName }}</span>
            <span style="float: right; color: #8492a6; font-size: 13px">{{ item.jobNo }}</span>
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="审批单日期">
        <el-date-picker v-model="attendanceDate" size="small"
                        type="daterange"
                        align="right"
                        unlink-panels
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        :picker-options="pickerOptions"
                        :clearable="false"
        >

        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="small" @click="handleCurrentChange(1)">筛选
        </el-button>
        <el-button type="primary" size="small" @click="reSet"
                   icon="el-icon-refresh">重置
        </el-button>
        <el-button type="primary" size="small" @click="goGetData"
                   icon="el-icon-download">重新获取数据
        </el-button>
      </el-form-item>

    </el-form>
    <el-table
        :data="tableData"
        height="630"
        border
        highlight-current-row
        :row-class-name="tableRowClassName"
        :header-cell-style="{'text-align':'center'}"
        :cell-style="{'text-align':'center'}">
      <!--      <el-table-column prop="userid"></el-table-column>-->
      <el-table-column type="selection" width="50" label="序号">
      </el-table-column>
      <el-table-column label="出勤日期" prop="workDate" fixed="left">
        <template slot-scope="scope">
          <span>{{scope.row.workDate|formatDateBirth}}</span>
        </template>
      </el-table-column>
      <el-table-column label="员工姓名" prop="userName" fixed="left">
      </el-table-column>
      <el-table-column label="工号" prop="jobNo" fixed="left">
      </el-table-column>
      <el-table-column label="事由" prop="tagName">

      </el-table-column>
      <el-table-column label="事由" prop="subType">

      </el-table-column>
      <el-table-column label="时长" min-width="100">
        <template slot-scope="scope">
          {{scope.row.duration}}({{scope.row.durationUnit}})
        </template>
      </el-table-column>
      <el-table-column label="开始时间" prop="beginTime" min-width="180">
        <template slot-scope="scope">
          {{ scope.row.beginTime|formatDate }}
        </template>
      </el-table-column>
      <el-table-column label="结束时间" prop="endTime" min-width="180">
        <template slot-scope="scope">
          {{ scope.row.endTime|formatDate }}
        </template>
      </el-table-column>
      <el-table-column label="审批单ID" prop="procinstId" show-overflow-tooltip>
      </el-table-column>
      <el-table-column label="审批单状态" prop="status" min-width="120">
      </el-table-column>
      <el-table-column label="审批单结果" prop="result" min-width="120">
      </el-table-column>
      <el-table-column label="创建日期" prop="createtime" min-width="180">
        <template slot-scope="scope">
          {{ scope.row.createTime|formatDate }}
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
          hide-on-single-page
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[12, 24, 36, 48]"
          :page-size=size
          layout="total, sizes, prev, pager, next, jumper"
          :total=total>
      </el-pagination>
    </div>
    <common-popup :title="'获取审批单'" :url="'/ding_approve_list/approve'" @loadList="getDataList" :type="'QING_JIA_TIAO_XIU,CHU_CHAI_SHEN_QING,CHAO_SHI_JIA_BAN'" ref="popup"></common-popup>
    <el-dialog title="获取审批单" :visible.sync="dialogFormVisible" center width="35%">
      <el-row>
        <el-form :model="form" label-width="3rem">
          <el-form-item label="姓名:">
            <el-select v-model="form.userId" placeholder="请选择员工姓名..." value-key="userId" size="small"
                       class="w100"
                       filterable clearable>
              <el-option :label="item.userName+'（'+item.jobNo+'）'" :value="item.userId" v-for="item in $store.state.userList">
                <span style="float: left">{{ item.userName }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.jobNo }}</span>
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="日期:">
            <el-date-picker v-model="attendanceDate" size="small"
                            type="daterange"
                            style="width: 100%"
                            align="left"
                            unlink-panels
                            @change="dateChange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :picker-options="pickerOptions"
                            :clearable="false"
                            value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>
        </el-form>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="show = false">取 消</el-button>
        <el-button size="small" type="primary" @click="getDataFromDingDing">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import moment from "moment";
import commonPopup from "@/components/common/commonPopup.vue";
// import {getData} from "vue/src/core/instance/state";
export default {
  name: "DingApproveList",
  components: {commonPopup},
  data() {
    return {
      currentPage: 1,
      total: 0,
      size: 12,
      tableData: [],
      dingUsersListName: null,
      dingUsersList: [],
      userList: [],
      attendanceDate: [moment().add("months",-1).format("YYYY-MM-DD"),moment().format("YYYY-MM-DD")],
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      dialogFormVisible: false,
      getDataDialogFormVisible: false,
      form: {
        start: null,
        end: null,
        userId: null,
        name: null,
        workDate: new Date(),
        timeResult: null,
        checkType: null,
        archivesDate: new Date(),
        hiredDate: null,
        attendanceDate: "2023-08-30"
      },
      formLabelWidth: '120px',
      timeResultList: [
        {
          label: "正常",
          value: "Normal",
        },
        {
          label: "早退",
          value: "Early",
        }, {
          label: "迟到",
          value: "Late",
        }, {
          label: "严重迟到",
          value: "SeriousLate",
        }, {
          label: "旷工迟到",
          value: "Absenteeism",
        }, {
          label: "未打卡",
          value: "NotSigned",
        },
      ],
      drawer: false,
      direction: 'rtl',
      attendanceResultList: [],
      popoverShow: false,
      row: {},
      monthData: [],
      selectedDataAttendanceDate: null,
      show:false,
    }
  },
  created() {
    // this.attendanceDate = [new Date(), new Date()]
    this.getDataList()
    //
  },
  mounted() {
    // this.$tools.getMonthData(this.form.start)
  },
  methods: {
    // getData,
    getObjectProperty(scope, dayIndex) {
      return eval("scope.row.basicattendance" + dayIndex);
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {
          });
    },
    tableRowClassName({row, rowIndex}) {
      if ((row.basicattendance < 8 || row.basicattendance === null) && row.week !== '七') {
        return 'error-row';
      }
      return '';
    },
    goGetData() {
      this.$refs.popup.open();
    },
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    getDataList() {
      this.dialogFormVisible = false
      this.form.start=this.attendanceDate[0]
      this.form.end=this.attendanceDate[1]
      console.log("查询数据：", this.form)
      axios.post("/ding_approve_list/list/" + this.currentPage + "/" + this.size, this.form).then(res => {
        console.log("打卡信息：", res)
        if (res.data.success) {
          this.tableData = res.data.data.records
          Object.freeze(this.tableData)
          this.total = res.data.data.total
          this.pages = res.data.data.pages
        } else {
          this.tableData = []
          this.total = 0
          this.pages = 1

        }

      })

    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.size = val
      this.getDataList()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val
      this.getDataList()
    },
    goSearch() {
      this.dialogFormVisible = true

    },
    dateChange() {
      this.form.start = this.attendanceDate[0]
      this.form.end = this.attendanceDate[1]
    },
    reSet() {
      this.form = {
        start: null,
        end: null,
        userId: null,
        name: null,
        workDate: null,
        timeResult: null,
        checkType: null,
        attendanceDate: new Date().getTime() - 3600 * 1000 * 24
      }
      this.getDataList()
    },
    handleChange() {
      this.getDataList()
    },
    handleUserChange() {
      // this.form.userId=
      console.log('Form:', this.form)
    },
    deleteById() {
      console.log("用户扫描删除")
    },
    updateById() {
      console.log("用户扫描修改")
    },
    getDataFromDingDing() {
      this.form.start = this.attendanceDate[0]
      this.form.end = this.attendanceDate[1];
      console.log("查询数据：", this.form)
      this.$tools.openLoading()
      axios.post("/ding_approve_list/get", this.form).then(res => {
        if (res.data.success) {
          this.getDataList()
          this.$tools.closeLoading();
          this.getDataDialogFormVisible = false;
        }
      })
    },
    getDingAttendanceDetail(row, summary, workDate) {
      this.selectedDataAttendanceDate = workDate
      console.log("row:", row)
      this.row = row
      this.row.workDate = workDate
      this.row.summary = summary
      console.log("row:", row)

      const data = {
        workDate: workDate,
        userId: row.userid,
      }

      console.log("Data:", data)
      axios.post("/ding_attendance_result/getDetail", data).then(res => {
        console.log("Res:", res)
        if (res.data.success) {
          this.attendanceResultList = res.data.data
        } else {
          this.attendanceResultList = []
        }
      })
      this.drawer = true
    }
  }
}
</script>
<style scoped lang="less">
.approve {
  .select {
    //margin-bottom: 0.5rem;
    display: inline-flex !important;
  }
}

</style>
